
import { App } from "../../application";
import { Widget } from "./Widget";

/**按钮
 * @param name 按钮名
 * @param click 按钮事件
 */
class ZoomButton extends Widget{
	private dom: any;
	private name: any;
	private click: any;
	private className: string;

	constructor(isZoomIn: boolean) {
		super();
		const btnClass = `
		box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
		cursor: pointer;
		width: 26px;
		height: 26px;
		background-color: #FFF;
		z-index: 10;
		position: fixed;
		right: 20px;
	`;

		let app = App.getInstance();
		let ui = app.ui;

		if (isZoomIn) {
			this.name = '+';
			this.className = 'plus_btn';

			this.click = () => {
				app.camera.zoomMap(true);
			}

			ui.setCustomCSS({
				className: 'plus_btn',
				callBack: () => {
					return `
					${btnClass}
					bottom: 44px;
				`;
				},
			});
		} else {
			this.name = '-';
			this.className = 'minus_btn';

			this.click = () => {
				app.camera.zoomMap(false);
			}

			ui.setCustomCSS({
				className: 'minus_btn',
				callBack: () => {
					return `
				${btnClass}
				bottom: 20px;
			`;
				},
			});
		}
		this.name = isZoomIn ? '+' : '-';
	}

	/**
	 * 加载元素
	 */
	public loadToDom() {
		const app = document.body;
		this.dom = document.createElement('input');
		this.dom.type = 'button';
		this.dom.style.userSelect = 'none'; //解决鼠标粘连的问题
		this.dom.value = this.name;
		this.dom.setAttribute('class', this.className);
		this.dom.addEventListener('click', this.click, false);
		app.appendChild(this.dom);
	}

	public setButtonValue(value: string) {
		this.dom.value = value;
	}

	public dispose(){
		if(!this.dom || !this.dom.parentNode){
            return;
        }
        this.dom.parentNode.removeChild(this.dom)
    }
}

export { ZoomButton };
